<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing: border-box;
        }
        #app{
            width: 800px;
            margin:20px auto;
        }
        tr{
            height: 50px;
            text-align: center;
        }
        .form-control{
            height: 40px;
            padding:10px;
            width: 100%;
            border:1px solid #DDD;
            border-radius: 4px;
        }
        .btn{
            border:1px solid #DDD;
            width: 60px;
            line-height: 30px;
            text-align: center;
            color:#555;
            background: #EEE;
            border-radius:6px;
            cursor: pointer;
            font-weight: 700;
            outline: 0;
        }
        .active{
            background-color: #EEE;
        }
        table,td{
            border:1px solid #CCC;
            /* 合并边框 */
            border-collapse: collapse;
        }
        .btn.danger{
            background-color: #D9534F;
            color:#FFF;
        }
        .btn.success{
            background-color:#337AB7;
            color:#FFF;
        }
        .line{
            border-bottom:1px solid #DDD;
            margin:10px 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>品牌管理</h1>
        <div class="line"></div>
        <div>
            <input class="form-control" type="text" placeholder="请输入品牌名称" @keydown.enter="add()" v-model='name'>
        </div>
        <div class="line"></div>
        <table cellpadding="0" cellspacing="0" width="100%">
            <thead>
                <tr class="active">
                    <td width="120">id</td>
                    <td>品牌名称</td>
                    <td>添加时间</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item,index in dataList" :key="item.id">
                    <td>{{item.id}}</td>
                    <td v-if='currentindex==index?false:true'>品牌名称-{{item.name}}</td>
                    <td v-else><input type="text" v-model='newname' @keydown.enter='change()'></td>
                    <td>{{item.time}}</td>
                    <td>
                        <button class="btn danger" @click="delet(index)">删除</button>
                        <button class="btn success" @click="modify(index)">编辑</button>
                    </td>
                </tr>
                
            </tbody>
        </table>
    </div>
</body>
<script>
new  Vue({
    el:'#app',
    data:{
        dataList:JSON.parse(localStorage.getItem('dataList') || '[]'),
        name:'',
        currentindex:-1,
        newname:'',
        canAdd:true
    },
    methods:{
        add(){
            if(this.canAdd){
                let id = this.dataList.length == 0 ? 1 : this.dataList[this.dataList.length - 1].id + 1;
                let obj = {
                    id: id,
                    name: this.name,
                    time: dayjs().format('YYYY-MM-DD HH:mm:ss')
                }

                this.dataList.push(obj);

                localStorage.setItem('dataList', JSON.stringify(this.dataList));

                this.name = '';
            }else{
                alert('name不符合规则');
            }
            
        },
        delet(index){
            this.dataList.splice(index,1);

            localStorage.setItem('dataList',JSON.stringify(this.dataList) );
        },
        modify(index){
            this.newname =  this.dataList[index].name;   
            this.currentindex = index;
            this.name = ''; 
        },
        change(){
            if (this.canAdd) {
                this.dataList[this.currentindex].name = this.newname;
                this.currentindex = -1;
                localStorage.setItem('dataList', JSON.stringify(this.dataList));
                this.newname=''}
            else {
                alert('name不符合规则');
            }
        }
    },
    computed:{

    },
    watch:{
        name(a){
            if(this.dataList.some(item=>item.name==a)){
                console.log('name不能重复');
                this.canAdd = false;
            }else{
                this.canAdd = true;
            }
        }
    }
});
</script>
</html>